<template>
    <section class="msgDetail">
      <scroll class="msgDetailScroll">
        <div class="msgDetailScrollBox">
          <ul>
            <li v-for="item in orders" @click="selected(item)">
              <div class="ordertime">{{item.ordertime | formatTime('yyyy-MM-dd hh:mm')}}</div>
              <div class="msgContent">
                <div class="header">预约成功通知</div>
                <div class="content">
                  {{item.patient}}成功预约{{item.ordertime | formatTime('yyyy-MM-dd hh:mm')}}{{item.organization}}{{item.project}}项目，
                  预约项目号为{{item.projectId}}，取号时间为就诊当天早上8到下午3点，请于取号时间段凭二代身份证原件、
                  （14岁一下儿童可带户口本原件，外籍人士出示护照，港澳台人员出示身份证件或回乡证）到一楼大厅云之家服务台取预约号，超过取
                  号时间段预约号将自动取消，号源作废，并视为违约一次。若无法如期取号，请于就诊前一天下午16:00前致电******、登录云之家网站操作退号、
                  未操作退号的患者，就诊当天不退预约费。</div>
                <div class="footer"><span class="left">查看详情</span><span><img src="../../../static/img/right_gray_arrow.png"/></span></div>
              </div>
            </li>
          </ul>
        </div>
      </scroll>
      <transition name="msgcontent">
        <router-view :item="selectedOrder"></router-view>
      </transition>
    </section>
</template>

<script>
    import Scroll from "../../components/scroll/scroll";
    import {mapMutations} from 'vuex';

    export default {
      components: {
        Scroll},
      name: "message-detail",
      props:{
        orders:{
          type: Array,
          default: null
        }
      },
      data () {
        return {
          selectedOrder: {}
        }
      },
      beforeRouteEnter(to, from, next){
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        // 一定要调用next()，否则不会跳转
        next(vm => {
          vm.setNewMsgNum(0)
          window.localStorage.setItem('orders',JSON.stringify(vm.orders))
        })
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        this.setNewMsgNum(0)
        next()
      },
      methods: {
        selected (item) {
          this.selectedOrder = item
          this.$router.push('/message/messageDetail/messageContent')
        },
        ...mapMutations({
          setNewMsgNum: 'SET_NEW_MSG_NUM'
        })
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";
  .msgDetail{
    position: absolute;
    z-index: 999;
    top: 90px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bc;
    .msgDetailScroll{
      overflow: hidden;
      height: 100%;
      .msgDetailScrollBox{
        padding-bottom: 90px;
        ul{
          li{
            .ordertime{
              display: flex;
              align-items: center;
              justify-content: center;
              color: #9c9c9c;
              /*position: relative;*/
              @include font-dpr(20px);
              line-height: 90px;
              text-align: center;
              &:before,&:after{
                content: "";
                /*position: absolute;*/
                transform: translateY(-50%);
                border-bottom: 1px solid #ececec;
                display: inline-block;
                height: 4px;
                width: 160px;
                margin: 0 28px;
              }
            }
            .msgContent{
              background-color: #ffffff;
              margin: 0 18px;
              border-radius: 10px;
              border: 4px solid #f6f6f6;
              @include font-dpr(28px);
              .header{
                color: #333333;
                line-height: 70px;
                padding: 0 18px;
              }
              .content{
                @include font-dpr(24px);
                color: #5d5d5d;
                padding: 10px 18px 36px 18px;
                border-bottom: 1px solid #ececec;
              }
              .footer{
                display: flex;
                align-items: center;
                justify-content: center;
                color: #919191;
                line-height: 60px;
                padding: 0 18px;
                .left{
                  flex: 1;
                }
                img{
                  height: 30px;
                  width: 30px;
                }
              }
            }
          }
        }
      }
      ul{
        li{
          .ordertime{
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9c9c9c;
            /*position: relative;*/
            @include font-dpr(20px);
            line-height: 90px;
            text-align: center;
            &:before,&:after{
              content: "";
              /*position: absolute;*/
              transform: translateY(-50%);
              border-bottom: 1px solid #ececec;
              display: inline-block;
              height: 4px;
              width: 160px;
              margin: 0 28px;
            }
          }
          .msgContent{
            background-color: #ffffff;
            margin: 0 18px;
            border-radius: 10px;
            border: 4px solid #f6f6f6;
            @include font-dpr(28px);
            .header{
              color: #333333;
              line-height: 70px;
              padding: 0 18px;
            }
            .content{
              @include font-dpr(24px);
              color: #5d5d5d;
              padding: 10px 18px 36px 18px;
              border-bottom: 1px solid #ececec;
            }
            .footer{
              display: flex;
              align-items: center;
              justify-content: center;
              color: #919191;
              line-height: 60px;
              padding: 0 18px;
              .left{
                flex: 1;
              }
              img{
                height: 30px;
                width: 30px;
              }
            }
          }
        }
      }
    }
  }
  .msgcontent-enter-active, .msgcontent-leave-active{
    transition: all 0.3s ease;
  }
  .msgcontent-enter, .msgcontent-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .msgcontent-leave, .msgcontent-enter-to{
    transform: translate3d(0, 0, 0);
  }
</style>
